<!DOCTYPE html>
<html>
<head>
<style>
#foo {
    color: magenta;
}
#invisible {
    display: none;
    color: blue;
}
#visible {
    display: block;
    color: red;
}
p {
    display: inherit;
    opacity: 50%;
    font-size: 90%;
    background: white;
    cursor: col-resize;
    border-radius: 30px 1cm;
}
p#yak {
    flex: content;
    height: 60px;
    left: -4%;
    padding: 6cm;
    margin: auto;
    border: 5px solid blue;
}
</style>
</style>
</head>
<body>
<div id=foo>Some text</div>
<div id=bar style="color: green">Other text</div>
<div id=invisible>You cannot see me</div>
<div id=visible>You CAN see me</div>
<p id="yak">Lorem Yaksum dolor sit yakkety...</p>
<script>
// #foo
var foo = document.getElementById("foo");
var fooStyle = window.getComputedStyle(foo);
console.log(fooStyle.color);

// #bar
var bar = document.getElementById("bar");
var barStyle = bar.style;
console.log(barStyle.color);

// #invisible
var invisible = document.getElementById("invisible");
var invisibleStyle = getComputedStyle(invisible);
console.log(invisibleStyle.display)
console.log(invisibleStyle.color)

// #visible
var visible = document.getElementById("visible");
var visibleStyle = getComputedStyle(visible);
console.log(visibleStyle.display)
console.log(visibleStyle.color)

var yak = document.getElementById("yak");
var yakStyle = getComputedStyle(yak);
for (style of ['font-size', 'border', 'padding', 'margin', 'flex', 'height', 'left', 'cursor', 'display', 'background', 'opacity', 'border-radius']) {
    console.log(style, yakStyle[style])
}
</script>
</body>
</html>
